<template>
  <div class="container">
    <div class="manager-header">
      <el-menu
        class="el-menu-demo"
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-submenu index="1">
          <template slot="title"
            ><li class="el-icon-coin"></li>
            档案中心</template
          >
          <el-menu-item index="1-1" @click="navTo('showCourseFile')">课程档案</el-menu-item>
          <el-menu-item index="1-2">成绩档案</el-menu-item>
          <el-menu-item index="1-3">家庭档案</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"
            ><li class="el-icon-full-screen"></li>
            超级面板</template
          >
          <el-menu-item index="2-1">校园新闻</el-menu-item>
          <el-menu-item index="2-2">就业信息</el-menu-item>
          <el-menu-item index="2-3">学生成绩</el-menu-item>
          <el-menu-item index="2-4">课程表</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"
            ><li class="el-icon-edit"></li>
            档案录入</template
          >
          <el-menu-item
            :index="'3-' + index"
            v-for="(item, index) in fileWritePermissionList"
            :key="index"
            @click="navTo(item.type)"
            >{{ item.introduction }}</el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"> 档案录入权限 </template>
          <el-menu-item index="4-1" @click="navTo('fileWriteApplication')">
            <i class="el-icon-position"></i>录入权限申请</el-menu-item
          >
          <el-menu-item index="4-2" @click="navTo('permissionsApplyResult')"
            ><i class="el-icon-message"></i>权限申请结果</el-menu-item
          >
        </el-submenu>
        <el-submenu class="avatar" index="5">
          <!-- <template slot="title"><el-avatar :size="55" :src="circleUrl"></el-avatar></template> -->
          <template slot="title">
            {{ userInfo.username }}
            <img id="avatar-img" :src="circleUrl" alt="" />
          </template>
          <el-menu-item index="5-1" @click="navTo('userHome')">
            <i class="el-icon-user"></i>个人主页</el-menu-item
          >
          <el-menu-item index="5-2" @click="navTo('fileMemory')">
            <i class="el-icon-video-camera"></i>档案回忆录</el-menu-item
          >
          <el-menu-item index="5-3" @click="navTo('userEditPassword')"
            ><i class="el-icon-lock"></i>安全</el-menu-item
          >
          <el-menu-item index="5-4" @click="logout"
            ><i class="el-icon-switch-button"></i>退出登录</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
    <div class="my-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { userLogOut, downloadAvatar, getFileWritePermissions } from "@/api";
import { removeToken } from "@/utils/token";
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //默认头像
      activeIndex: "5-1",
      userInfo: {},
      fileWritePermissionList: [],
    };
  },
  created() {
    this.downloadManagerAvatar();
    this.getPermissions();
    this.userInfo = this.$store.state.user.userInfo;
    this.$router.push({ name: "userHome" });
  },
  methods: {
    //处理导航选择
    handleSelect(key, keyPath) {
      if (key == "4-1") {
        this.$router.push({ name: "userHome" });
      }
    },
    //推出登录
    async logout() {
      let res = await userLogOut();
      removeToken();
      this.$store.dispatch("user/logOut");
      this.$router.push({ name: "login" });
    },
    //下载用户头像
    async downloadManagerAvatar() {
      let params = {
        avatarUrl: this.$store.state.user.userInfo.avatarUrl,
      };
      let res = await downloadAvatar(params);
      let avatar_img = document.querySelector("#avatar-img");
      let imageType = res.type; //获取图片类型
      const blob = new Blob([res], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      avatar_img.src = imageUrl;
      avatar_img.onload = function (e) {
        window.URL.revokeObjectURL(avatar_img.src); //释放URL.createObjectURL()创建的对象
      };
    },
    //获取用户档案录入权限
    async getPermissions() {
      let res = await getFileWritePermissions();
      if (res.code == 0) {
        this.fileWritePermissionList = res.data;
      }
    },
    //导航到固定页面
    navTo(routeName) {
      this.$router.push({ name: routeName });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  margin-top: 0px;
  flex-direction: column;
  align-items: center;
}
.manager-header {
  width: 100%;
  background: gold;
  .avatar {
    float: right;
  }
}
.my-content {
  width: 100%;
  margin: 1px;
  height: 643px;
  background: #f0f2f5;
}
#avatar-img {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  margin-bottom: 10px;
}
</style>